<template>
	<view class="content">
		<view>
			<u-tabs :list="tabList" :is-scroll="false" font-size="28" height="88" bar-width="56" :bar-style="tabActive"
			 active-color="#171919" inactive-color="#666666" :current="current" @change="change"></u-tabs>
		</view>
		<view class="subject">
			<view class="group-card mt20">
				<groupItem :groupData="list"></groupItem>
				<view class="info flex">
					<view class="c3 fs22">合计：￥<span class="fs30">213</span></view>
					<u-button shape="circle" plain size="mini" :custom-style="lastBtn">邀请好友</u-button>
				</view>
			</view>
		</view>
		<view class="group-btn flex">
			<view class="btn-box">
				<u-button shape="circle" plain :custom-style="botLfBtn">我的拼团</u-button>
			</view>
			<view class="btn-box">
				<u-button shape="circle" plain :custom-style="lastBtn">拼团订单</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import order from "../../json/order.js"
	import groupItem from "../../components/group/group.vue"
	export default {
		components: {
			groupItem
		},
		data() {
			return {
				current: 0,
				tabList: [{
					name: '全部'
				}, {
					name: '进行中'
				}, {
					name: '已拼成'
				}, {
					name: '已失败'
				}],
				tabActive: {
					background: "#FCB900"
				},
				list: {},
				lastBtn: {
					borderColor: "#F9274A",
					color: "#F71D41"
				},
				botLfBtn: {
					background: "linear-gradient(to right,#F74563,#F72A4C)",
					color: "#FFFFFF"
				}
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		},
		onLoad() {
			this.list = order.group;
		}
	}
</script>

<style scoped>
	.subject {
		padding: 0 20rpx;
	}

	.group-card {
		background: #FFFFFF;
		padding: 20rpx 26rpx 24rpx;
		border-radius: 12rpx;
	}

	.info {
		margin-top: 32rpx;
	}

	.group-btn {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		padding: 10rpx 24rpx;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.btn-box {
		width: 340rpx;
		height: 80rpx;
	}
</style>
